<template>
   <div>
       <div v-if="currentPanel == 'default'">
           <el-card class="box-card">
               <div style="display:flex;justify-content: space-between">
                   <div>
                       <el-input v-model="queryData.clientName" placeholder="客户名称" size="small"></el-input>
                       <el-select v-model="queryData.clientStatusId" placeholder="客户阶段" size="small">
                           <el-option v-for="item in dictionary.clientStage" :key="item.value" :label="item.label"
                                      :value="item.value">
                           </el-option>
                       </el-select>&nbsp;&nbsp;
                       <el-button type="primary" @click="queryDataHandle(1, 10)" size="small">查询</el-button>
<!--                       <el-divider direction="vertical"></el-divider>-->
                       <el-button plain @click="resetQuery" size="small">重置</el-button>
                       <el-divider direction="vertical"></el-divider>
                       <span style="font-size: 14px">共{{ dataSource.length }}个客户</span>
                       <el-divider direction="vertical"></el-divider>
                       <el-button plain size="small" @click="exportHandle">导出excel</el-button>
                   </div>
                   <div>
                       <el-button type="primary" @click="$refs.setClient.visibleHandle()" size="small">未设置客户({{ unSetNum }})</el-button>
                       <el-divider direction="vertical"></el-divider>
                       <el-button plain @click="currentHandle('addClientStage')" size="small">客户阶段设置</el-button>
                   </div>
               </div>
           </el-card>

           <div class="interspaceH"></div>

           <el-card class="box-card">
               <el-table :data="dataSource" :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                   <el-table-column prop="clientName" label="客户名称"></el-table-column>
                   <el-table-column prop="clientStatusName" label="客户阶段" :formatter="formatter"></el-table-column>
                   <el-table-column prop="empName" label="所属员工" :formatter="formatter"></el-table-column>
                   <el-table-column prop="clientRate" label="客户评分" :formatter="formatter"></el-table-column>
                   <el-table-column label="企业标签" width="400">
                       <template slot-scope="scope">
                           <el-tag :key="index" v-for="(tag, index) in scope.row.tagList" style="margin: 0 10px 10px 0">
                               {{ tag.clientTagsName }}
                           </el-tag>
                           <div v-if="scope.row.tagList == null || scope.row.tagList.length == 0">
                               --
                           </div>
                       </template>
                   </el-table-column>
                   <el-table-column prop="joinTime" label="添加时间" :formatter="formatter"></el-table-column>
                   <el-table-column label="操作">
                       <template slot-scope="scope">
                           <el-button @click="detailHandle(scope.row)" type="text" size="small">详情</el-button>
                       </template>
                   </el-table-column>
               </el-table>

               <div class="interspaceH"></div>

               <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                              @current-change="queryDataHandle($event,pagePagination.pageSize)"
                              :current-page="pagePagination.currentPage"
                              :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                              layout="total, sizes, prev, pager, next"
                              :total="pagePagination.total">
               </el-pagination>
           </el-card>

           <SetClient ref="setClient" @queryDataHandle="queryDataHandle" />
       </div>
       <div v-if="currentPanel == 'addClientStage'">
           <CreateStage @currentHandle="currentHandle" />
       </div>

       <ClientDetail ref="clientDetail"/>
   </div>
</template>

<script>

const queryData = {
    name: '',//客户名称
    clientStatusId: '',//所属员工
}
//多选框 - 开始

//多选框 - 结束

import SetClient from "@/views/customer/client_stage/client_set"
import CreateStage from "@/views/customer/client_stage/create_stage"
import ClientDetail from '@/views/customer/client/client_detail'

export default {
    components: {
        SetClient,
        CreateStage,
        ClientDetail
    },
    data() {
        return {
            currentPanel: 'default',
            detailVisible: false,
            dictionary: {
                clientStage: [],
            },
            fieldType: {
                clientStage: "array",
                joinTime: "datetime"
            },
            queryData: {...queryData},
            dataSource: [],
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
            unSetNum: 0
        }
    },
    mounted() {
        this.queryDataHandle()
        this.queryStageHandle()
        this.queryUnSetHandle()
    },
    methods: {
        currentHandle(e) {
          this.currentPanel = e
        },
        queryDataHandle(page = 1, row = 10) {
            let that = this

            let queryData = that.queryData

            let payload = {
                ...queryData,
                clientType: "1",
                pageNum: page,
                pageSize: row
            }

            that.$request("/api/customers/getCustomersByParams/1_0", payload, "POST").then((data) => {
                this.dataSource = data.rows
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
            })
        },
        queryUnSetHandle() {
            let that = this
            let payload = {
                clientStatus: true,
                clientType: "1",
            }

            that.$request("/api/customers/getCustomersByParams/1_0", payload, "POST").then((data) => {
                that.unSetNum = data.rows.length
            })
        },
        queryStageHandle() {
            let that = this
            that.$request("/api/clientStage/queryClientStageByParams/1_0", {}, "POST").then((data) => {
                let dataSource = data.rows
                let stageList = []

                dataSource.map((item) => {
                    stageList.push({
                        ...item,
                        label: item.clientStatusName,
                        value: item.clientStatusId
                    })
                })

                that.dictionary.clientStage = [...stageList]
            })
        },
        resetQuery() {
            this.queryData = queryData
            this.$message({
                message: '重置成功',
                type: 'success'
            });
        },
        formatter(row, column) {
            let field = column.property;
            let value = row[field];
            return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
        },
        exportHandle() {
            this.$requestFile("/api/customers/exportCustomers/1_0", {clientType: '1'}, "客户列表.xlsx")
        },
        detailHandle(row) {
            this.$refs.clientDetail.open(true, row)
        },
    }
}
</script>

<style scoped>
.box-card .el-input {
    width: 200px;
}

.el-select /deep/ {
    width: 200px;
}
</style>
